import React, { useState, useEffect } from 'react';
import { Input } from 'antd';
import cn from 'classnames';
import styles from './index.less';

const LimitedTextArea = React.forwardRef(
    ({ onChange, rows = 5, maxLength = 500, value = '', hidden, ...rest }, ref) => {
        const [val, setVal] = useState(value);
        useEffect(() => {
            setVal(value);
        }, [value]);
        const handleChange = e => {
            setVal(e.target.value);
            if (onChange) {
                onChange(e.target.value);
            }
        };
        return (
            <section className={styles.textAreaLimitContainer} ref={ref}>
                <Input.TextArea
                    rows={rows}
                    maxLength={maxLength}
                    onChange={handleChange}
                    value={val}
                    hidden={hidden}
                    {...rest}
                ></Input.TextArea>
                <div className={cn(styles.textAreaLimitContent, { [styles.hidden]: hidden })}>
                    还可输入
                    <span className={styles.textAreaLimitItem}>
                        {maxLength - val.length < 1 ? 0 : maxLength - val.length}
                    </span>
                    字
                </div>
            </section>
        );
    }
);
export default LimitedTextArea;
